<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>系统风格设置</title>
  <link rel="stylesheet" href="/res/layui/css/layui.css">
  <style>
    .h {

    }
  </style>
</head>
<body>
<div style="min-width: 600px;margin: 15px;">
  <div th:each="item:${getStyles}" class="h" th:id="${item.id}" title="直接点击更换风格"
       th:style="${item.cssValue+'margin: 10px;width: 200px;height: 200px;float: left;cursor:pointer;'}">
    <h3 th:id="${'t-'+item.id}" th:text="${item.description}"
        style="color: white;text-align: center;line-height: 200px;"></h3>
  </div>
</div>
<script type="text/javascript" src="/res/layui/layui.js"></script>
<script>
  layui.use(['layer', 'jquery'], function () {
    var layer = layui.layer
    var $ = layui.jquery
    $('.h').on('click', function (e) {
      var id = $(this).attr("id");
      $.ajax({
        data: {'id': id},
        type: 'post',
        url: '/admin/updateSystemStyle',
        success(data) {
          if (data.code == 0) {
            $('#main-style', parent.document).html(data.data)
          }
          var t = $("#t-" + id).html();
          layer.msg(t + data.message)
        }
      })
    })
  });
</script>
</body>
</html>
